<script setup>

// 组件引入
import DormitoryMangerCpn from '@/components/main/dormitoryManger/dormitoryMangerCpn.vue'
import AddPanel from '@/components/main/dormitoryManger/add-panel.vue'

import { ref, watch, onMounted } from 'vue'
import { Delete, Plus, Search } from '@element-plus/icons-vue'
import { useDMStore } from '@/store/super-manger/dormitoryMangerStore'
import { storeToRefs } from 'pinia';
import { useCommonStore } from '@/store/commonStore'
import { deleteMoreApi } from '@/service/dormitory-manger'
import eventBus from '@/utils/eventBus.js'
import { ElMessage } from 'element-plus'
import { showDeleteTip } from '@/utils/deleteSuccess'

const commonStore = useCommonStore();
const { 
  isShowDMAddPanel, 
  isShowCover, 
  isShowTipInfo, 
  tipInfoContent, 
  oplationType
} = storeToRefs(commonStore)

const dmStore = useDMStore();
const { isSearchStatus, selectionIds } = storeToRefs(dmStore);
const searchKey = ref('name');  // 搜索类型
const searchValue = ref('');    // 搜索关键字
const tipText = ref('请输入姓名');

watch(searchKey, (newValue) => {
  if (newValue === 'phone') {
    tipText.value = '请输入手机号'
  } else if (newValue === "name") {
    tipText.value = '请输入姓名'
  } else if (newValue === 'id') {
    tipText.value = '请输入编号'
  }
  
})


onMounted(() => {
  // 发送网络请求
  dmStore.getAllDMData();
})

// 添加宿舍管理员信息
const addBtn = () => {
  isShowCover.value = true;
  isShowDMAddPanel.value = true;
}

// 取消按钮
const cancelBtn = () => {
  isShowCover.value = false;
  isShowDMAddPanel.value = false;
}

// 搜索
const searchBtnClick = () => {
  if (!searchValue.value) return;   // 如果搜索框没有值
  isSearchStatus.value = true;
  // 发送网络请求
  dmStore.searchInfo(searchKey.value, searchValue.value)
}

// 清空搜索框时，恢复原来的数据
watch(searchValue, (newValue) => {
  if (!newValue && isSearchStatus.value) {
    dmStore.getAllDMData();
  }
})

// 批量删除
const deleteMoreData = () => {
  isShowTipInfo.value = true;
  tipInfoContent.value = '删除后将无法恢复，确定删除选中的信息记录吗？';
  oplationType.value = 'delete-more'
}

eventBus.on('deleteMoreClick', async function() {
  // 发送网络请求
  const res = await deleteMoreApi(selectionIds.value)
  if (res.data.code === 1) {  // 删除成功
    showDeleteTip(ElMessage);
  }
})
</script>

<template>
  <div class="dormitory_manger main_content">
    <div class="header">
      <div class="left">
        <el-button 
          type="primary" 
          plain 
          @click="addBtn" 
          size="small"
        > 
          <el-icon><Plus /></el-icon>
          <span>新增</span>
        </el-button>
        <el-button 
          type="danger" 
          plain 
          :disabled="!selectionIds.length"
          size="small"
          @click="deleteMoreData"
        >
          <el-icon><Delete /></el-icon>
          <span>批量删除</span>
        </el-button>
      </div>
      <div class="right">
        <el-select v-model="searchKey">
          <el-option label="姓名" value="name" />
          <el-option label="手机号" value="phone" />
          <el-option label="宿管编号" value="id" />
        </el-select>
        <el-input 
          v-model="searchValue" 
          class="search_value" 
          :placeholder="tipText"
        />
        <el-button type="primary" @click="searchBtnClick">
          <el-icon><Search /></el-icon>
          搜素
        </el-button>
      </div>
    </div>
    <div class="list">
      <dormitory-manger-cpn />
    </div>
    <!-- 添加面板 -->
    <div class="addPanel">
      <transition name="dm_panel">
        <AddPanel 
          v-if="isShowDMAddPanel"
          @cancel-click="cancelBtn"
        />
      </transition>
    </div>
  </div>
</template>

<style scoped lang="less">
.dormitory_manger {
  position: relative;
  box-sizing: border-box;
  .header {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    .right {
      .search_value {
        margin: 0 10px;
        width: 200px;
      }
    }
  }
  .addPanel {
    position: absolute;
    top: 0;
    left: 300px;
    z-index: 11;
  }
}
.el-select {
  width: 120px;
}
</style>